<template>
  <div id="app" class="app-shell">
    <!-- 科技感背景层：栅格 + 辐射光晕 -->
    <div class="bg-grid" aria-hidden="true"></div>
    <div class="bg-glow" aria-hidden="true"></div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  min-height: 100vh;
}

.app-shell {
  position: relative;
  isolation: isolate; /* 让背景层不影响内容层 */
}

/* 科技感背景：网格线 */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--bg-secondary);
  transition: background-color 0.3s ease;
}

[data-theme="dark"] .bg-grid {
  background:
    radial-gradient(60rem 60rem at 80% -10%, rgba(34,211,238,0.12), transparent 60%),
    radial-gradient(40rem 40rem at 10% 110%, rgba(99,102,241,0.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00)),
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.04) 0 1px,
      transparent 1px 120px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.04) 0 1px,
      transparent 1px 120px
    );
  background-color: #070b14;
}

[data-theme="light"] .bg-grid {
  background:
    radial-gradient(60rem 60rem at 80% -10%, rgba(14,165,233,0.06), transparent 60%),
    radial-gradient(40rem 40rem at 10% 110%, rgba(99,102,241,0.05), transparent 60%),
    repeating-linear-gradient(
      to right,
      rgba(0,0,0,0.04) 0 1px,
      transparent 1px 120px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.04) 0 1px,
      transparent 1px 120px
    );
  background-color: #F8FAFC;
}

/* 科技感背景：中心光晕 */
.bg-glow {
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 50vh;
  z-index: -1;
  pointer-events: none;
  filter: blur(80px);
  opacity: var(--glow-opacity);
  transition: opacity 0.3s ease;
}

[data-theme="dark"] .bg-glow {
  background: radial-gradient(closest-side, rgba(34,211,238,0.30), rgba(34,211,238,0.00)),
              radial-gradient(closest-side, rgba(99,102,241,0.25), rgba(99,102,241,0.00));
}

[data-theme="light"] .bg-glow {
  background: radial-gradient(closest-side, rgba(14,165,233,0.15), rgba(14,165,233,0.00)),
              radial-gradient(closest-side, rgba(99,102,241,0.12), rgba(99,102,241,0.00));
}
</style>
